<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dom-class Test</title>
</head>
<body>
<script src="../test/test.js"></script>
<script>
    KISSY.Test.Config.times = 1;
</script>

<h2>Test Data</h2>

<script src="../../build/kissy/kissy-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>

<script src="dom.js"></script>
<script src="selector.js"></script>
<script src="dom-class.js"></script>

<script src="../../third-party/jquery/jquery-1.4.2.js"></script>

<div id="test-data">
    <p id="foo">
        <a href="../kissy/" style="color:red" class="link" title="test" data-test="test">test link</a>
        <input type="text" id="test-input" readonly maxlength="20" value="hello"/>
        <input type="radio" id="test-radio" />
        <input type="radio" id="test-radio2" checked />
        <label class="test" for="test-input">label</label>
        <button type="button" tabindex="3">Submit</button>
        <textarea rows="2" cols="2">
            test
        </textarea>
    </p>
    <div id="test-div"></div>
    <table id="test-table" cellspacing="10">
        <tbody>
        <tr>
            <td rowspan="2" colspan="3">td</td>
        </tr>
        </tbody>
    </table>
    <select id="test-select">
        <option id="test-opt" value="1">0</option>
        <option>2</option>
        <option>3</option>
    </select>
    <select id="test-select2">
        <option>2</option>
    </select>
    <select id="test-select3" multiple autocomplete="off">
        <option selected>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
</div>

<!-- Test Cases -->
<script>
    var S = KISSY, DOM = S.DOM,
        foo = S.get('#foo'),
        a = S.get('#foo a'),
        input = S.get('#foo input'),
        radio = S.get('#test-radio'),
        radio2 = S.get('#test-radio2'),
        button = S.get('#foo button'),
        label = S.get('#foo label'),
        table = S.get('#test-table'),
        td = S.get('#test-table td'),
        select = S.get('#test-select'),
        select2 = S.get('#test-select2'),
        select3 = S.get('#test-select3'),
        opt = S.get('#test-opt'),
        div = S.get('#test-div'),
        opt2 = S.query('#test-select option')[1],
        area = S.get('#foo textarea');

    function test_hasClass(test) {
        a.className = 'link link2 link3';

        if (DOM.hasClass(a, 'link') !== true) test.fail();
        if (DOM.hasClass(a, 'link4') !== false) test.fail();

        //alert($(a).hasClass('link link3'));
        if (DOM.hasClass(a, 'link link3') !== true) test.fail();
        if (DOM.hasClass(a, 'link link4') !== false) test.fail();

        if (DOM.hasClass(a, '.link .link4') !== false) test.fail();
    }

    function test_addClass(test) {
        DOM.addClass(a, 'link-added');
        if (DOM.hasClass(a, 'link-added') !== true) test.fail();

        DOM.addClass(a, '.cls-a cls-b');
        if (DOM.hasClass(a, 'cls-a') !== true) test.fail();
        if (DOM.hasClass(a, 'cls-b') !== true) test.fail();
    }

    function test_removeClass(test) {
        a.className = 'link link2 link3 link4 link5';

        DOM.removeClass(a, 'link');
        if (DOM.hasClass(a, 'link') !== false) test.fail();

        DOM.removeClass(a, 'link2 link4');
        DOM.removeClass(a, '.link3');
        if (a.className !== 'link5') test.fail();
    }

    function test_replaceClass(test) {
        a.className = 'link link3';

        // oldCls 有的话替换
        DOM.replaceClass(a, '.link', 'link2');
        if (DOM.hasClass(a, 'link')) test.fail();
        if (!DOM.hasClass(a, 'link2')) test.fail();

        // oldCls 没有的话，仅添加
        DOM.replaceClass(a, 'link4', 'link');
        if (!DOM.hasClass(a, 'link')) test.fail();
    }

    function test_toggleClass(test) {
        a.className = 'link link2';

        DOM.toggleClass(a, 'link2');
        if (DOM.hasClass(a, 'link2')) test.fail();

        DOM.toggleClass(a, '.link2');
        if (!DOM.hasClass(a, 'link2')) test.fail();
    }

    // temp code
    //alert(' .class1 .class2'.split(/[\.\s]\s*\.?/).length);
</script>

</body>
</html>